<template>
  <dv-border-box-7 id="left-row-down-chart">
    <div class="left-row-down-chart-tittle">报警信息</div>
    <hr />
    <dv-scroll-board :config="config"/>
  </dv-border-box-7>
</template>

<script>
import { fontSize } from "./scrollBoard.vue";
import Axios from "axios";
export default {
  name: "leftRowDownChart",
  data() {
    return {
      config: {
        header: ["名称", "时间", "报警内容"],
        data: [
          ["OP10", "2022-08-08 15:00", "报警"],
          ["OP20", "2022-08-08 15:00", "报警"],
          ["OP30", "2022-08-08 15:00", "报警"],
        ],
        index: true,
        align: ["center", "center", "center", "center"],
        columnWidth: [fontSize(8), fontSize(8), fontSize(20), fontSize(35)],
        indexHeader: "序号",
        rowNum: 8,
        headerBGC: "#1981f6",
        headerHeight: fontSize(4),
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",
        carousel: "page",
        headerHeight:30
      },
    };
  },
  methods: {
    async UpdateData() {
      var _this = this;
      var data = "";
      var Array = [];

      //axios 调用接口
      var url = this.$baseUrl + "message/warning";
      await Axios.get(url).then((response) => (data = response.data.Value));

      // for (var i in data) {
      //   Array.push(Object.values(data[i]));
      // }
      Array = objectToArr(data, Array);
      _this.config = {
        header: ["名称", "时间", "报警内容"],
        //待修改
        data: Array,
        // [
        //   Object.values(response.data[0]),
        //   Object.values(response.data[1]),
        //   Object.values(response.data[2]),
        // ],
        index: true,
        align: ["center", "center", "center", "center"],
        columnWidth: [fontSize(8), fontSize(8), fontSize(20), fontSize(35)],
        indexHeader: "序号",
        rowNum: 8,
        headerBGC: "#1981f6",
        headerHeight: fontSize(4),
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",
        carousel: "page",
      };
    },
  },
  mounted() {
    this.UpdateData();
    setInterval(this.UpdateData, 5000);
  },
};
function objectToArr(data, Array) {
  for (var i in data) {
    Array.push(Object.values(data[i]));
  }
  return Array;
}
</script>

<style lang="less">
#left-row-down-chart {
  width: 100%;
  height: 62%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
   overflow: hidden;
  .left-row-down-chart-tittle {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
    background-color: #1981f6;
  }
}
</style>
